<template>
  <el-container>
    <el-main>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form
                ref="sqlForm"
                label-width="120px"
                class="demo-ruleForm"
            >

              <el-form-item label="SQL语句">
                <el-input type="textarea" :rows="20" v-model="value" placeholder="请输人SQL语句,需携带数据库，如:select name from db.test" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-table :data="profileMap" border style="width: 100%">
              <el-table-column prop="key" label="状态" width="180" />
              <el-table-column prop="value" label="消耗时间(秒)/异常信息" width="180" />
            </el-table>
          </div>
        </el-col>
      </el-row>


    </el-main>
  </el-container>
</template>
<script>
import {useStore} from "vuex";
import {reactive,toRefs,readonly} from 'vue';
import { ElMessage } from 'element-plus';
import ajax from "../../http";
export default {
  name: "Profile",
  setup(){
    const store = useStore();

    store.commit('setToggleHead','users');

    let profile = reactive({
      dataBaseName:null,
      value:null,
    });
    const{dataBaseName,value} =toRefs(profile);

    //key:SQL语句所处的状态-value:消耗时间
    let profileMap = reactive([{
      key:'Status',
      value: 'Duration'
    }]);

    function onSubmit(){
        if(profile.value===null ||  profile.value ==='' || profile.value.trim() ===''){
          ElMessage({
            message: 'SQL语句不能为空',
            type: 'warning',
          })
          return ;
        }

        ajax('/events/profile',profile,'POST').then(resp=>{
          profileMap.splice(0,profileMap.length);
          for(let key in resp.data){
            let temp = {key:key,value:resp.data[key]}
            profileMap.push(temp);
          }
        })
    }
    return{
      dataBaseName,
      value,
      onSubmit,
      profileMap,
    }
  }
}

//空格判断
String.prototype.trim = function () {
  return this.replace(/(^\s*)|(\s*$)/g, '');
}
</script>

<style scoped>

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>